<template>
    <div>
        <van-tabbar safe-area-inset-bottom route v-model="active" active-color="#f1a42a" inactive-color="#abafb9">
            <van-tabbar-item to="/" icon="hot">热门产品</van-tabbar-item>
            <van-tabbar-item to="/list" icon="wap-nav">产品分类</van-tabbar-item>
            <van-tabbar-item to="/car" icon="smile">我的订单</van-tabbar-item>
            <van-tabbar-item to="/mine" icon="manager">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
export default {
  name: 'tab-bar',
  data () {
      return {
          active: 0
      }
  }
}
</script>

<style scoped>

</style>
